<template>
    <w-pop ref="pop" :direction="'btt'" :showHeader="false" :closeModal="false">
        <el-icon class="close_icon" size="52" color="#fff" @click="handleClose">
            <CircleClose />
        </el-icon>
        <div class="title">提貨地址</div>
        <div class="addr_list" v-for="item in list" :key="item.addressId" @click="handleClickAddr(item)">
            <div class="addr_item">
                <div class="name">{{item.storeName}}</div>
                <div class="addr">{{ item.address }} </div>
            </div>
        </div>
    </w-pop>
</template>

<script>
import { defineComponent, ref } from "vue";
import { getShopLocal } from '@/api/car'
export default defineComponent({
    props: {},
    components: {},
    setup(props,{emit}) {
        const pop = ref();
        const open = () => {
            pop.value.open();
            init()
        };

        const list = ref([])
        const init = async () => {
            const res = await getShopLocal({})
            if (res) {
                list.value = res
            }
        }


        const handleClose = () => {
            pop.value.close();

        }


        const wdate = ref()


        const  handleClickAddr = (item)=>{
            emit('handleClickAddr',item)
            handleClose()
        }
        return {
            list,
            pop,
            open,
            handleClose,
            handleClickAddr
        };
    },
});
</script>

<style scoped lang="scss">
.close_icon {
    position: absolute;
    right: 16px;
    top: -80px;
    z-index: 100;
}

.title {
    color: #000;
    /* H3 */
    font-family: Helvetica;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 24px 0 8px 16px;
}

.addr_list {
    margin: 0 16px;
    margin-bottom: 26px;

    .addr_item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        padding-bottom: 16px;
        padding-top: 16px;

        .name {
            color: #333;
            font-family: Helvetica;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin-bottom: 4px;
        }

        .addr {
            color: #666;
            font-family: Helvetica;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
            /* 166.667% */
        }
    }

    .addr_item:last-child {}
}
</style>
